<!--
 * @Author: mayijun
 * @Date: 2022-07-04 10:54:21
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-08 14:18:12
-->
<script lang="ts" setup>
import AQueryTable from '@dangojs/a-query-table';
import { reactive, ref, watch } from 'vue';
import type { IPageConfigVO } from '@/types/base';
const props = defineProps({
  tableView: {
    type: Object
  }
});
const loading = ref<boolean>(false);

const emit = defineEmits(['changePageNum', 'changePageSize']);
const pageConfig = reactive<any>({
  total: 0,
  pageSize: 10,
  current: 1,
  showTotal: true, // 是否显示总数
  showJumper: false, // 是否显示跳转
  showPageSize: true, // 是否显示数据条数选择器
  pageSizeOptions: [10, 20, 30, 40, 50],
  hideOnSinglePage: true
});

// 表格分页 和  改变一页数量
const handlePageChange = (pageNum: any) => {
  pageConfig.current = pageNum;
  emit('changePageNum', pageConfig, 0);
};
const handlePageSizeChange = (pageSize: any) => {
  pageConfig.pageNum = 1;
  pageConfig.pageSize = pageSize;
  emit('changePageSize', pageConfig, 0);
};

const tableViewData = reactive<any>({
  columnList: [],
  tableViewList: []
});

watch(
  () => props.tableView,
  (val) => {
    tableViewData.columnList = val?.columnList?.map((item: any) => {
      return {
        title: item,
        dataIndex: item
      };
    });
    tableViewData.tableViewList = val?.pageInfo?.list;
    pageConfig.total = val?.pageInfo?.total;
    pageConfig.current = val?.pageInfo?.pageNum;
    pageConfig.pageSize = val?.pageInfo?.pageSize;
  },
  {
    immediate: true
  }
);
</script>

<template>
  <a-table
    v-if="tableViewData.columnList && tableViewData.columnList.length > 0"
    class="table-view-header"
    :columns="tableViewData.columnList"
    :data="tableViewData.tableViewList"
    :pagination="pageConfig"
    @page-change="handlePageChange"
    @page-size-change="handlePageSizeChange"
    :loading="loading"
    :bordered="false"
  >
  </a-table>
  <span v-else class="arco-table-cell arco-table-cell-align-left">
    <span class="arco-table-td-content">
      <div class="arco-empty">
        <div class="arco-empty-image">
          <svg
            viewBox="0 0 48 48"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            stroke="currentColor"
            class="arco-icon arco-icon-empty"
            stroke-width="4"
            stroke-linecap="butt"
            stroke-linejoin="miter"
          >
            <path
              d="M24 5v6m7 1 4-4m-18 4-4-4m28.5 22H28s-1 3-4 3-4-3-4-3H6.5M40 41H8a2 2 0 0 1-2-2v-8.46a2 2 0 0 1 .272-1.007l6.15-10.54A2 2 0 0 1 14.148 18H33.85a2 2 0 0 1 1.728.992l6.149 10.541A2 2 0 0 1 42 30.541V39a2 2 0 0 1-2 2Z"
            ></path>
          </svg>
        </div>
        <div class="arco-empty-description">暂无数据</div>
      </div>
    </span>
  </span>
</template>

<style lang="scss" >
.table-view-header .arco-table-container {
  .arco-table-cell {
    padding: 13px 16px;
  }
  .arco-table-tr-empty .arco-table-td {
    border-bottom: 0px;
  }
}
</style>